<!--
 * @Author: 李天惊 uf_lee@163.com
 * @Date: 2025-02-17 11:07:02
 * @LastEditors: 李天惊 uf_lee@163.com
 * @LastEditTime: 2025-02-17 11:42:19
 * @FilePath: \global-brain\global-brain-admin\src\views\Login\components\RegisterForm.vue
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<script setup lang="ts">
import { reactive, ref, unref, watch } from 'vue'
import { Form } from '@/components/Form'
import { useI18n } from '@/hooks/web/useI18n'
import { ElButton, ElCheckbox, ElLink, ElMessageBox } from 'element-plus'
import { required, isPhone, isPassword } from '@/utils/formRules'
import { useForm } from '@/hooks/web/useForm'
import { registerApi } from '@/api/login'
import type { UserRegusterType } from '@/api/login/types'
import { useRouter } from 'vue-router'
import type { RouteLocationNormalizedLoaded } from 'vue-router'

const { currentRoute } = useRouter()
const { t } = useI18n()

// 获取页面高度
const bodyHeigth = document.documentElement.clientHeight

const rules = {
  username: [required],
  password: [required, isPassword],
  nickname: [required],
  mobile: [required, isPhone],
  confirm_password: [
    required,
    isPassword,
    {
      validator: async (_rule, _value, callback) => {
        const formData: any = await methods.getFormData<UserRegusterType>()
        if (formData.confirm_password != formData.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
    }
  ]
}

const schema = reactive<FormSchema[]>([
  {
    field: 'title',
    colProps: {
      span: 24
    }
  },
  {
    field: 'username',
    label: t('用户名'),
    value: '',
    component: 'Input',
    colProps: {
      span: 24
    },
    componentProps: {
      placeholder: t('请输入登录的账号')
    }
  },
  {
    field: 'password',
    label: t('密码'),
    value: '',
    component: 'InputPassword',
    colProps: {
      span: 24
    },
    componentProps: {
      style: {
        width: '100%'
      },
      placeholder: t('login.passwordPlaceholder')
    }
  },
  {
    field: 'confirm_password',
    label: t('确认密码'),
    value: '',
    component: 'InputPassword',
    colProps: {
      span: 24
    },
    componentProps: {
      style: {
        width: '100%'
      },
      placeholder: t('login.passwordPlaceholder')
    }
  },
  {
    field: 'nickname',
    label: t('姓名'),
    value: '',
    component: 'Input',
    colProps: {
      span: 24
    },
    componentProps: {
      placeholder: t('请输入姓名')
    }
  },
  {
    field: 'mobile',
    label: t('手机号码'),
    value: '',
    component: 'Input',
    colProps: {
      span: 24
    },
    componentProps: {
      placeholder: t('请输入手机号码')
    }
  },
  {
    field: 'login',
    colProps: {
      span: 24
    }
  },
  {
    field: 'tool',
    colProps: {
      span: 24
    }
  }
])
const remember = ref(false)

const { register, elFormRef, methods } = useForm()

const loading = ref(false)

const redirect = ref<string>('')

watch(
  () => currentRoute.value,
  (route: RouteLocationNormalizedLoaded) => {
    redirect.value = route?.query?.redirect as string
  },
  {
    immediate: true
  }
)

const emit = defineEmits(['setFormType'])

const test = () => {
  alert('测试')
}

// 登录
const signIn = async () => {
  console.log('remember', remember.value)
  const formRef = unref(elFormRef)
  await formRef?.validate(async (isValid) => {
    if (isValid) {
      loading.value = true
      const { getFormData } = methods
      const formData = await getFormData<UserRegusterType>()
      if (remember.value == true) {
        const res = await registerApi(formData)
          .catch(() => {})
          .finally(() => (loading.value = false))

        if (res) {
          ElMessageBox.alert('去登录您的账号吧', '注册成功', {
            confirmButtonText: '确认',
            callback: () => {
              emit('setFormType', 'login')
            }
          })
          // alert('注册成功，请登录您的账号')
        }
      } else {
        loading.value = false
        alert('要同意')
      }
    }
  })
}
</script>

<template>
  <Form
    :schema="schema"
    :rules="rules"
    label-position="top"
    hide-required-asterisk
    size="large"
    class="dark:(border-1 border-[var(--el-border-color)] border-solid)"
    @register="register"
    :style="'overflow-y: auto; height:' + (bodyHeigth - 160) + 'px'"
  >
    <template #title>
      <h2 class="text-2xl font-bold text-center w-[100%]">{{ t('欢迎注册账号') }}</h2>
    </template>

    <template #tool>
      <div class="flex justify-between items-center w-[100%]">
        <div>
          <ElCheckbox v-model="remember" size="small" class="test-12px"> 阅读并接受 </ElCheckbox>
          <ElLink
            type="primary"
            style="
              font-size: 12px;
              height: 24px;
              line-height: 20px;
              display: inline-block;
              padding-left: 2px;
            "
            :underline="false"
            @click.stop="test()"
            >《用户协议》</ElLink
          >
        </div>
        <div>
          <span style="font-size: 12px"> 已有帐号？ </span>
          <ElLink
            type="primary"
            :underline="false"
            style="font-size: 12px"
            @click="emit('setFormType', 'login')"
            >登录</ElLink
          >
          <!-- <a style="color: #409eff" @click="formType = 'login'"> 登录 </a> -->
        </div>
      </div>
    </template>

    <template #login>
      <ElButton
        :loading="loading"
        :disabled="!remember"
        type="primary"
        class="w-[100%]"
        @click="signIn"
      >
        {{ t('注册') }}
      </ElButton>
    </template>
  </Form>
</template>

<style lang="less" scoped>
:deep(.anticon) {
  &:hover {
    color: var(--el-color-primary) !important;
  }
}
</style>
